<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 企业工商信息
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    class="handle-del mr10"
                    @click="delAllSelection"
                >批量删除</el-button>
                <el-select v-model="query.companytype" placeholder="企业类型" class="handle-select mr10"  >
                    <el-option key="1" label="企业类型" value=""></el-option>
                    <el-option
                            v-for="(item,index) in companyTypeList"
                            :key="index+'1'"
                            :value="item.tid"
                            :label="item.typeName"
                    ></el-option>

                </el-select>
                <el-select v-model="query.organizations" placeholder="组织机构" class="handle-select mr10">
                    <el-option key="1" label="组织机构" value=""></el-option>
                    <el-option
                            v-for="(items,index) in organizationsList"
                            :key="index+'1'"
                            :value="items.id"
                            :label="items.organization"
                    ></el-option>
                </el-select>
                <el-select v-model="query.industry" placeholder="行业分类" class="handle-select mr10">
                    <el-option key="1" label="行业分类" value=""></el-option>
                    <el-option
                            v-for="(items,index) in industryList"
                            :key="index+'1'"
                            :value="items.iuId"
                            :label="items.industryName"
                    ></el-option>
                </el-select>
                <el-select v-model="query.registerStatus" placeholder="登记状态" class="handle-select mr10">
                    <el-option key="1" label="登记状态" value=""></el-option>
                    <el-option key="2" label=" 在业/存续" value=" 在业/存续"></el-option>
                    <el-option key="3" label="筹建" value="筹建"></el-option>
                    <el-option key="4" label="清算" value="清算"></el-option>
                    <el-option key="5" label="迁入" value="迁入"></el-option>
                    <el-option key="6" label="迁出" value="迁出"></el-option>
                    <el-option key="7" label="停业" value="停业"></el-option>
                    <el-option key="8" label="撤销" value="撤销"></el-option>
                    <el-option key="9" label="吊销" value="吊销"></el-option>
                    <el-option key="10" label="注销" value="注销"></el-option>

                </el-select>
                <el-input v-model="query.companyName" placeholder="企业名称" class="handle-input mr10"></el-input>
                <el-input v-model="query.name" placeholder="法人" class="handle-input handle-input_min mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="30" align="center" prop="cid"></el-table-column>
              <!--  <el-table-column  prop="cid" style="display: none"></el-table-column>-->
                <el-table-column prop="companyName" label="公司名称" width="200"  align="center"></el-table-column>
                <el-table-column prop="partnerName" label="法人" align="center"></el-table-column>
                <el-table-column prop="typeName" label="企业类型" align="center">
                   <!-- <template slot-scope="scope">￥{{scope.row.money}}</template>-->
                </el-table-column>
                <el-table-column label="组织机构"  prop="organization" align="center">
                   <!-- <template slot-scope="scope">
                        <el-image
                            class="table-td-thumb"
                            :src="scope.row.thumb"
                            :preview-src-list="[scope.row.thumb]"
                        ></el-image>
                    </template>-->
                </el-table-column>
                <el-table-column prop="industryName" label="行业分类" align="center"></el-table-column>
                <el-table-column label="登记状态" align="center"> <!--prop="registerStatus"-->
                    <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.registerStatus==='成功'?'success':(scope.row.registerStatus==='失败'?'danger':'')"
                        >{{scope.row.registerStatus}}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column  label="注册时间" align="center">
                    <template slot-scope="scope">{{scope.row.createTime | formatDate}}</template>
                </el-table-column>
                <el-table-column label="操作" width="280" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                                type="text"
                                icon="el-icon-lx-calendar"
                                class="red"
                                @click="handleDetail(scope.$index, scope.row)"
                        >详情</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                        <el-button
                                type="text"
                                icon="el-icon-view"
                                @click="AddSelection(scope.$index, scope.row)"
                        >股权分配</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="详情" :visible.sync="editVisible" width="50%">
            <el-form ref="form" :model="form" label-width="110px">
                <el-form-item label="企业名称">
                    <el-input v-model="form.companyName"  readonly="readonly" ></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address"  readonly="readonly" ></el-input>
                    </el-form-item>
                    <el-form-item label="Email">
                        <el-input v-model="form.mailbox" prop="mailbox"  readonly="readonly" ></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" >
                        <el-input v-model="form.phone"   readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="官网">
                        <el-input v-model="form.officialWebsite"  readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="公司简介" >
                        <el-input type="textarea" rows="5"  readonly="readonly" v-model="form.briefing"></el-input>
                    </el-form-item>
                    <el-form-item label="法人">
                        <el-input  readonly="readonly" v-model="form.a" prop="a"></el-input>
                    </el-form-item>
                    <el-form-item label="企业类型" >
                        <el-input  readonly="readonly" v-model="form.b" prop="b"></el-input>
                    </el-form-item>

                    <el-form-item label="组织机构">
                        <el-input  readonly="readonly" v-model="form.d" prop="d"></el-input>
                    </el-form-item>
                    <el-form-item label="注册资本">
                        <el-input v-model="form.registerCapital" prop="registerCapital"  readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="实缴资本">
                        <el-input v-model="form.paidCapital" prop="paidCapital"  readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="登记状态">
                        <el-input v-model="form.registerStatus" prop="registerStatus"  readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="成立日期">
                        <el-input  prop="createTime" readonly="readonly" :value="form.createTime | formatDate"></el-input>
                    </el-form-item>
                    <el-form-item label="核准日期">
                        <el-input :value="form.approvalTime | formatDate" prop="approvalTime" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="统一社会信用代码" prop="uscc">
                        <el-input v-model="form.uscc" prop="uscc"  readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="组织机构代码"  >
                        <el-input v-model="form.ocode" prop="ocode"  readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="工商注册号"  >
                        <el-input v-model="form.bsnumber" prop="bsnumber"  readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="纳税人识别号">
                        <el-input v-model="form.tinumber"  prop="tinumber"  readonly="readonly" ></el-input>
                    </el-form-item>
                    <el-form-item label="进出口企业代码" >
                        <el-input v-model="form.importNumber"  prop="importNumber"  readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="行业分类">
                        <el-input v-model="form.c"  prop="c" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="营业期限" >
                        <el-input v-model="form.businessTerm" prop="businessTerm"  readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="登记机关" >
                        <el-input v-model="form.authority"   readonly="readonly" prop="authority"></el-input>
                    </el-form-item>
                    <el-form-item label="人员规模" >
                        <el-input v-model="form.personnel"   readonly="readonly" prop="personnel"></el-input>
                    </el-form-item>
                    <el-form-item label="参保人数">
                        <el-input v-model="form.personsNumber" prop="personsNumber"  readonly="readonly" ></el-input>
                    </el-form-item>
                    <el-form-item label="所属地区">
                        <el-input v-model="form.region"  readonly="readonly" prop="region"></el-input>
                    </el-form-item>
                    <el-form-item label="曾用名">
                        <el-input v-model="form.oldName" prop="oldName"  readonly="readonly" ></el-input>
                    </el-form-item>
                    <el-form-item label="英文名">
                        <el-input v-model="form.englishName" prop="englishName"  readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="经营范围" >
                        <el-input type="textarea" rows="5" prop="nature" v-model="form.nature"  readonly="readonly"></el-input>
                    </el-form-item>
                </el-form >
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editVisible = false">关闭</el-button>

            </span>
        </el-dialog>
    </div>
</template>

<script>
import {formatTimeToStr} from '../common/date.js';
export default {
    name: 'basetable',
    data() {
        return {
            query: {
                companytype: '',
                organizations: '',
                industry:'',
                registerStatus:'',
                name: '',
                companyName:'',
                pageIndex: 0,
                pageSize: 5
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 10,
            form: {},
            idx: -1,
            id: -1,
            companyTypeList:{},
            organizationsList:{},
            industryList:{}

        };
    },
    created() {
        this.typeList();
        this.organizationsGetData();
        this.getIndustry();
        this.getData(this.query);
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            const _this = this
            _this.$axios.post("/companydata/companys",_this.query).then(res =>  {
            _this.tableData =res.data.data.companyList;
            _this.pageTotal=res.data.data.totalCount;


        })
        },
        typeList() {
            const _this = this
            _this.$axios.get("/companytype/finaAll").then(res =>  {
            _this.companyTypeList = res.data.data
        })
        },
        organizationsGetData() {
            const _this = this
            _this.$axios.get("/organizations/finaAll").then(res =>  {
            _this.organizationsList = res.data.data
        })
        },
        getIndustry(){
            const _this = this
            _this.$axios.get("/industry/finaAll").then(res =>  {
            _this.industryList = res.data.data
        })
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(()=>{
                this.$axios.get("/companydata/del/"+row.cid).then(res =>{
                if(res.status = 200){
                this.$message.success('删除成功');
                this.tableData.splice(index, 1);
                this.getData();
            }

        });
        }).catch(() => {});
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
           if(length!=0){
               // 二次确认删除
               this.$confirm(`确定要删除这${length}条数据吗？`, '提示', {
                   type: 'warning'
               }).then(()=>{
                   let str = '';
               this.delList = this.delList.concat(this.multipleSelection);
               for (let i = 0; i < length; i++) {
                   console.log(this.multipleSelection[i].cid);
                   str += this.multipleSelection[i].companyName + ' ';
                   this.$axios.get("/companydata/del/"+this.multipleSelection[i].cid).then(res =>{
                       if(res.status = 200){
                       this.tableData.splice(this.multipleSelection[i], 1);
                       this.getData();
                   }

               });
               }
               this.$message.error(`删除了${length}条数据`);
               this.multipleSelection = [];
           }).catch(() => {});
           }else {
               this.$message.error(`请选择要删除的数据！`);
           }
        },
        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.form = row;
            this.$router.push({
                    path: '/companyFrom',
                query: {
                        cid: row.cid,
                    }

            });
        },
        //详情
        handleDetail(index, row) {
            const _this=this;
            _this.idx = index;
            this.$axios.get('/companydata/' + row.cid).then((res) => {
                console.log(res.data.data);
                _this.form=res.data.data;
        })
            this.editVisible = true;
        },
        // 保存编辑
      /*  saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.$set(this.tableData, this.idx, this.form);
        },*/
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex',val);
            this.getData();
        },
        AddSelection(index, row){
            const _this=this;
            _this.idx = index;
            console.log(row.cid);
            this.$axios.get('/companydata/companySelect/' + row.cid).then((res) => {
                console.log(res.data.data);
           if (res.data.data.cid == null){
               this.$router.push({
                   path: '/pEditor',
                   query: {
                       cid: row.cid,
                   }

               });
           }else {
               this.$message.success(`不存在股权分配问题`);
           }
        })

        }

    },
    filters: {
        formatDate: function (time) {
            if (time != null && time != "") {
                var date = new Date(time);
                return formatTimeToStr(date, "yyyy-MM-dd");
            } else {
                return "";
            }
        }
    }


};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.handle-input_min{
    width: 150px;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-input__inner {
     width: 80%;
}

</style>
